<template>
  <div class="online_gift_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <el-tabs v-model="activeName" type="border-card" class="base_details_tabs">
          <el-tab-pane name="basic">
            <template #label>
              <el-badge>
                <span>基本信息</span>
              </el-badge>
            </template>
            <div class="content">
              <div class="base_details_title">基本信息</div>
              <div class="base_details_content_second">
                <GiftBasicForm ref="giftBasicFormRef" :readOnly="readOnly" :data="data" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="spec">
            <template #label>
              <el-badge>
                <span>关联产品</span>
              </el-badge>
            </template>
            <div class="content">
              <div class="base_details_title">产品设置<b></b></div>
            </div>
            <div class="base_details_content_second">
              <ProductSettings ref="productSettings" :data="productSettingsData" :travelProgramme="programme"
                  :readOnly="readOnly" :modify="modifyMode" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <el-button @click="route.go(-1)" v-show="activeName === 'basic'">取消</el-button>
        <el-button @click="tabChange('spec')" v-show="activeName === 'basic'" type="primary">下一步</el-button>
        <el-button @click="tabChange('basic')" v-show="activeName === 'spec'">上一步</el-button>
        <el-button @click="save(0)" v-show="activeName === 'spec'" type="primary" v-if="!readOnly">保存
        </el-button>
        <el-button @click="save(1)" v-show="activeName === 'spec'" type="primary" v-if="!readOnly">保存并上架
        </el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import GiftBasicForm from "@com/marketing/GiftBasicForm.vue";
import ProductSettings from "@com/marketing/ProductSettings.vue";
import { ref, reactive } from "vue";
import $ from "@util/base"
import { $msg } from "@ui/msg"
import api from "@api/gift"
import useRoute from "@util/router";

const route = useRoute()

const urlQuery = route.query()
var readOnly = false
var title = "礼包详情"
var modifyMode = false
$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true
    title = "礼包详情"
    getData()
  },
  add: () => {
    title = "新增礼包"
  },
  modify: () => {
    modifyMode = true
    title = "修改礼包"
    getData()
  }
})

const activeName = ref("basic");

const giftBasicFormRef = ref(null)

function tabChange(active) {
  giftBasicFormRef.value.getValue()
  if (active == 'spec') {
    giftBasicFormRef.value.check().then(valid => {
      if (valid) {
        activeName.value = active
      }
    })
  } else {
    activeName.value = active
  }
}

const productSettings = ref(null)
const productSettingsData = ref([])
const programme = ref([])

const data = ref({})

function getData() {
  api.details(urlQuery.code, val => {
    data.value = val
    productSettingsData.value = val.giftPoolList
  })
}

function save(submitType) {
  giftBasicFormRef.value.check().then(valid => {
    if (valid) {
      let paramsData = giftBasicFormRef.value.getValue()
      paramsData.giftType = '1011001'
      paramsData.submitType = submitType
      paramsData.giftPoolList = productSettings.value.getValue()
      if (paramsData.giftPoolList) {
        $.handleCRU(urlQuery.type, {
          add: () => {
            api.add(paramsData, () => {
              $msg.succ("保存成功")
              route.go(-1)
            })
          },
          modify: () => {
            paramsData.giftCode = urlQuery.code
            api.update(paramsData, () => {
              $msg.succ("保存成功")
              route.go(-1)
            })
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.online_gift_details {
  height: 100%;
}

</style>